<template>
  <section class=" EndWaybillList" :class="{ padding: !createOrder }">
    <el-card>
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchCriteria"
        class=" padding-top-sm flex align-center justify-between"
        size="mini"
      >
        <div>
          <el-form-item label="SKU">
            <el-input
              v-model="searchCriteria.sku"
              :type="createOrder ? 'textarea' : 'text'"
              placeholder="SKU"
            />
          </el-form-item>
          <el-form-item label="英文品名">
            <el-input
              v-model="searchCriteria.declareNameEn"
              type="text"
              placeholder="英文品名"
            />
          </el-form-item>
          <el-form-item label="中文品名">
            <el-input
              v-model="searchCriteria.declareNameCn"
              type="text"
              placeholder="中文品名"
            />
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div class=" padding-bottom-sm flex align-center justify-between">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes,total"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

        <el-button-group v-if="!createOrder">
          <el-button type="primary" size="mini" @click="uploadDialog = true">
            批量导入SKU
          </el-button>
          <el-button type="primary" size="mini" @click="onBatchDownload">
            批量导出SKU
          </el-button>

          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="dialogFormVisible = true"
          >
            新增SKU
          </el-button>
        </el-button-group>
        <el-button type="primary" size="mini" @click="batchAddSku">
          批量添加SKU
        </el-button>
      </div>
      <TableModule
        :need-checkbox="true"
        :max-height="createOrder ? 500 : 0"
        :table-columns="tableColumns"
        :table-data="pickupInfo"
        :table-operation="tableOperation"
        :multiple-selection.sync="multipleSelection"
        @clickOperation="operationList"
      />
    </el-card>

    <el-dialog
      append-to-body
      :title="editType ? '编辑SKU' : '新增SKU'"
      width="80%"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
        size="mini"
        :model="form"
      >
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="sku">
              <div slot="label">SKU：</div>
              <el-input
                v-model="form.sku"
                type="text"
                placeholder="请填写SKU"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="declareNameEn">
              <div slot="label">英文品名：</div>
              <el-input
                v-model="form.declareNameEn"
                placeholder="请填写英文品名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="declareNameCn">
              <div slot="label">中文品名：</div>
              <el-input
                v-model="form.declareNameCn"
                placeholder="请填写中文品名"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="brand">
              <div slot="label">品牌：</div>
              <el-input
                v-model="form.brand"
                placeholder="请填写品牌"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="material">
              <div slot="label">材质：</div>
              <el-input
                v-model="form.material"
                clearable
                placeholder="请填写材质"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="purpose">
              <div slot="label">用途：</div>
              <el-input
                v-model="form.purpose"
                clearable
                placeholder="请填写用途"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="model">
              <div slot="label">型号：</div>
              <el-input
                v-model="form.model"
                clearable
                placeholder="请填写型号"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="measurementUnit">
              <div slot="label">单位：</div>
              <el-select v-model="form.measurementUnit" placeholder="请选择">
                <el-option
                  v-for="(key, val) in publicData.skuUnitMap"
                  :key="key"
                  :label="key"
                  :value="val"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="perSuitNum">
              <div slot="label">每套个数：</div>
              <el-input
                v-model="form.perSuitNum"
                clearable
                placeholder="请填写每套个数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="purchasingPrice">
              <div slot="label">采购单价¥：</div>
              <el-input
                v-model="form.purchasingPrice"
                clearable
                placeholder="请填写采购单价"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="declareValue">
              <div slot="label">申报单价：</div>
              <el-input
                v-model="form.declareValue"
                clearable
                placeholder="请填写申报单价"
              />
            </el-form-item>
          </el-col> -->
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="salePrice">
              <div slot="label">销售单价：</div>
              <el-input
                v-model="form.salePrice"
                clearable
                placeholder="请填写销售单价"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="salesConnection">
              <div slot="label">ASIN/销售链接：</div>
              <el-input
                v-model="form.salesConnection"
                clearable
                placeholder="请填写ASIN/销售链接"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="isCharged">
              <div slot="label">FNSKU：</div>
              <el-input
                v-model="form.fnSku"
                maxlength="10"
                clearable
                placeholder="请填写"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="distributionMaterialCount">
              <div slot="label">配送料：</div>
              <el-input
                v-model="form.distributionMaterialCount"
                clearable
                placeholder="请填写配送料"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="productLotCount">
              <div slot="label">出品手数料：</div>
              <el-input
                v-model="form.productLotCount"
                clearable
                placeholder="请填写出品手数料"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="customsCode">
              <div slot="label">出口报关编码：</div>
              <el-input
                v-model="form.customsCode"
                clearable
                maxlength="15"
                placeholder="请填写海关编码"
              />
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="isCharged">
              <div slot="label">是否带电：</div>
              <el-input
                v-model="form.isCharged"
                clearable
                placeholder="请填写是否带电："
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="customsCodeList">
              <div slot="label">
                目的港清关编码：<span class="text-red">*</span>
              </div>
              <div>
                <div
                  v-for="(item, index) in form.customsCodeList"
                  :key="`customsCodeList_${index}`"
                  class="flex"
                >
                  <el-select
                    v-model="item.customsCodeAreaManagementId"
                    placeholder="请选择"
                    @change="selectCustomsCode"
                  >
                    <el-option
                      v-for="(c, j) in publicData.customsCodeList"
                      :key="j"
                      :label="c.label"
                      :value="parseInt(c.value)"
                      :disabled="selectedCustomsCode.includes(c.value)"
                    />
                  </el-select>
                  <el-input
                    v-model="item.hscode"
                    clearable
                    maxlength="15"
                    placeholder="请填写"
                  />
                  <div class="flex align-center">
                    <i
                      class="el-icon-plus text-xl margin-left-sm"
                      @click="addCustomsCode(index)"
                    />
                    <i
                      class="el-icon-minus text-xl margin-left-sm"
                      @click="removeCustomsCode(index)"
                    />
                  </div>
                </div>
              </div>
            </el-form-item>
            <!-- $store.getters.publicData.customsCodeMap -->
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="customsDeclaredPriceList">
              <div slot="label">申报价格：<span class="text-red">*</span></div>
              <div>
                <div
                  v-for="(item, index) in form.customsDeclaredPriceList"
                  :key="`customsCodeList_${index}`"
                  class="flex"
                >
                  <el-select
                    v-model="item.currency"
                    placeholder="请选择"
                    @change="selectCurrency"
                  >
                    <el-option
                      v-for="(key, val) in publicData.currencyMap"
                      :key="key"
                      :label="key"
                      :value="val"
                      :disabled="selectedCurrency.includes(val)"
                    />
                  </el-select>
                  <el-input
                    v-model="item.price"
                    clearable
                    maxlength="15"
                    placeholder="请填写"
                  />
                  <div class="flex align-center">
                    <i
                      class="el-icon-plus text-xl margin-left-sm"
                      @click="addCustomsDeclaredPrice(index)"
                    />
                    <i
                      class="el-icon-minus text-xl margin-left-sm"
                      @click="removeCustomsDeclaredPrice(index)"
                    />
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="imgUrl">
              <div slot="label">产品图片：</div>

              <el-upload
                action="/customer/skuInfo/uploadSkuImage"
                class="avatar-uploader"
                :on-remove="handleRemove"
                :multiple="false"
                :limit="1"
                :http-request="uploadFn"
              >
                <img
                  v-if="form.imgUrl"
                  :src="fileUrl + form.imgUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <!-- <el-dialog :visible.sync="dialogVisible"> -->
              <!-- <img width="100%" :src="dialogImageUrl" alt="" /> -->
              <!-- </el-dialog> -->
            </el-form-item>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8">
            <el-form-item prop="imgUrl">
              <div slot="label">售价截图：</div>

              <el-upload
                action="/customer/skuInfo/uploadSkuImage"
                class="avatar-uploader"
                :on-remove="handleRemove"
                :multiple="false"
                :limit="1"
                :http-request="uploadFn2"
              >
                <img
                  v-if="form.sellPriceScreenshot"
                  :src="fileUrl + form.sellPriceScreenshot"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8" :lg="8">
            <el-form-item prop="imgUrl">
              <div slot="label">收益截图：</div>

              <el-upload
                action="/customer/skuInfo/uploadSkuImage"
                class="avatar-uploader"
                :on-remove="handleRemove"
                :multiple="false"
                :http-request="uploadFn3"
                :limit="1"
              >
                <img
                  v-if="form.incomeScreenshot"
                  :src="fileUrl + form.incomeScreenshot"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :sm="24" :md="12" :lg="12"> -->

        <!-- </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">
          {{ editType ? '保存' : '立即创建' }}
        </el-button>
        <el-button @click="resetForm('ruleForm')">
          重置
        </el-button>
      </div>
    </el-dialog>
    <ImportPop
      :upload-dialog.sync="uploadDialog"
      :dialog-title="`批量导入SKU信息`"
      :template-url="`#`"
      :action-url="`/customer/skuInfo/batchimportcustomersku`"
      :file-name="`templateFile`"
      :static-file-name="`skuInfo`"
      @uploadCb="onBatchSubmit"
    />
  </section>
</template>

<script>
import TableModule from '@/components/TableModule'
import ImportPop from '@/components/ImportPop'
import golablData from '@/utils/config'
import { clone } from '@/utils/clone'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { checkRowsEmpty } from '@/utils/waybill-public'
import {
  uploadSkuImage,
  querySkuInfoPage,
  customerskuinfoList,
  customerskuinfoSave,
  customerskuinfoDelete,
  exportSKU
} from '@/api/myProfile'
export default {
  name: 'SkuInfo',
  components: {
    TableModule,
    ImportPop
  },
  props: {
    createOrder: {
      type: Boolean,
      default: false
    },
    showSkuListVisible: {
      type: Boolean,
      default: false
    },
    multipleSelectionSku: {
      type: Array,
      // 选择的数据
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      fileUrl: golablData.fileUrl,
      count: 0,
      pageSize: 20,
      uploadDialog: false,
      dialogFormVisible: false,
      editType: false,
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      multipleSelection: [],
      form: {
        sku: '',
        declareNameCn: '',
        declareNameEn: '',
        brand: '',
        material: '',
        purpose: '',
        customsCode: '',
        customsCodeList: [{ customsCodeAreaManagementId: '', hscode: '' }],
        customsDeclaredPriceList: [{ currency: '', price: '' }],
        salesConnection: '',
        isCharged: '',
        volt: '',
        milliampere: '',
        watt: '',
        salePrice: '',
        declareValue: '',
        purchasingPrice: '',
        model: '',
        measurementUnit: '',
        perSuitNum: '',
        imgUrl: '',
        asin: '',
        productLotCount: '',
        distributionMaterialCount: '',
        sellPriceScreenshot: '',
        incomeScreenshot: ''
      },
      streetList: [],
      cityValue: [],
      currentPage: 1,
      searchCriteria: {
        declareNameCn: '',
        declareNameEn: '',
        sku: ''
      },
      tableColumns: [
        { prop: 'sku', label: 'SKU' },
        { prop: 'fnSku', label: 'FNSKU' },
        { prop: 'declareNameEn', label: '英文品名' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'brand', label: '品牌' },
        { prop: 'material', label: '材质' },
        { prop: 'purpose', label: '用途' },
        { prop: 'model', label: '型号' },
        { prop: 'customsCode', label: '出口报关编码' },
        { prop: 'customsCodeListHtml', label: '目的港清关编码' },
        { prop: 'measurementUnit', label: '单位' },
        { prop: 'perSuitNum', label: '每套个数' },
        { prop: 'purchasingPrice', label: '采购单价(RMB)' },
        { prop: 'customsDeclaredPriceListHtml', label: '申报价格' },
        { prop: 'isCharged', label: '带电否' },
        { prop: 'imgUrl', label: 'SKU图片', type: 'img' }
      ],
      pickupInfo: [],
      selectedCustomsCode: [],
      selectedCurrency: [],
      tableOperation: [
        {
          name: 'edit',
          tips: '编辑',
          type: 'svg',
          show: ['all']
        },
        {
          name: 'delete',
          tips: '删除',
          type: 'i',
          show: ['all']
        }
      ],
      rules: {
        sku: [{ required: true, message: '请填写SKU', trigger: 'blur' }],
        declareNameCn: [
          { required: true, message: '请填写中文品名', trigger: 'blur' }
        ],
        declareNameEn: [
          { required: true, message: '请填写英文品名', trigger: 'blur' }
        ],
        brand: [{ required: true, message: '请填写品牌', trigger: 'blur' }],
        material: [{ required: true, message: '请填写材质', trigger: 'blur' }],
        purpose: [{ required: true, message: '请填写用途', trigger: 'blur' }],
        customsCode: [
          { required: true, message: '请填写海关编码', trigger: 'blur' }
        ],
        salesConnection: [
          { required: false, message: '请填写ASIN/销售链接', trigger: 'blur' }
        ],
        isCharged: [
          { required: false, message: '请填写是否带电', trigger: 'blur' }
        ],
        volt: [
          { required: false, message: '请填写伏特（电压）', trigger: 'blur' }
        ],
        milliampere: [
          { required: false, message: '请填写毫安(容量)', trigger: 'blur' }
        ],
        watt: [
          { required: false, message: '请填写瓦特(功率)', trigger: 'blur' }
        ],
        salePrice: [
          { required: false, message: '请填写销售单价', trigger: 'blur' }
        ],
        // declareValue: [
        //   { required: true, message: '请填写申报货值', trigger: 'blur' }
        // ],
        purchasingPrice: [
          { required: true, message: '请填写采购单价', trigger: 'blur' }
        ],
        model: [{ required: true, message: '请填写型号', trigger: 'blur' }],
        measurementUnit: [
          { required: true, message: '请选择单位', trigger: 'change' }
        ],
        perSuitNum: [
          { required: false, message: '请填写每套个数', trigger: 'blur' }
        ],
        imgUrl: [{ required: false, message: '请填写公司名', trigger: 'blur' }],
        customsCodeList: [
          { required: false, message: '请填写', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },

  mounted() {
    this.init()
    console.log('this.createOrder :>> ', this.createOrder)
  },
  methods: {
    init() {
      if (this.createOrder) {
        this.getCreateList()
      } else {
        this.getList()
      }
    },
    async getList() {
      this.$store.dispatch('app/toggleDialog', true)
      const data = await customerskuinfoList({
        authorization: getToken(),
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        declareNameCn: this.searchCriteria.declareNameCn,
        declareNameEn: this.searchCriteria.declareNameEn,
        sku: this.searchCriteria.sku
      })

      this.pickupInfo = data.datas
      const cmap = this.publicData.customsCodeMap
      for (const i of this.pickupInfo) {
        if (i.imgUrl) {
          i.imgUrl = i.imgUrl
        }
        if (i.customsCodeList && i.customsCodeList.length > 0) {
          i.customsCodeListHtml = []
          for (const j of i.customsCodeList) {
            i.customsCodeListHtml += `<div>${
              cmap[j.customsCodeAreaManagementId]
            }-${j.hscode}</div>`
          }
        }
        if (
          i.customsDeclaredPriceList &&
          i.customsDeclaredPriceList.length > 0
        ) {
          i.customsDeclaredPriceListHtml = ''
          for (const j of i.customsDeclaredPriceList) {
            i.customsDeclaredPriceListHtml += `<div>${j.currency} ${j.price}</div>`
          }
        }
      }
      this.count = data.count
      this.$store.dispatch('app/toggleDialog', false)
    },
    async getCreateList() {
      this.$store.dispatch('app/toggleDialog', true)
      const data = await querySkuInfoPage({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        declareNameCn: this.searchCriteria.declareNameCn,
        declareNameEn: this.searchCriteria.declareNameEn,
        skuArr: this.searchCriteria.sku
      })

      this.pickupInfo = data.datas
      const cmap = this.publicData.customsCodeMap
      for (const i of this.pickupInfo) {
        if (i.imgUrl) {
          i.imgUrl = i.imgUrl
        }
        if (i.customsCodeList && i.customsCodeList.length > 0) {
          i.customsCodeListHtml = []
          for (const j of i.customsCodeList) {
            i.customsCodeListHtml += `<div>${
              cmap[j.customsCodeAreaManagementId]
            }-${j.hscode}</div>`
          }
        }
        if (
          i.customsDeclaredPriceList &&
          i.customsDeclaredPriceList.length > 0
        ) {
          i.customsDeclaredPriceListHtml = ''
          for (const j of i.customsDeclaredPriceList) {
            i.customsDeclaredPriceListHtml += `<div>${j.currency} ${j.price}</div>`
          }
        }
      }
      this.count = data.count
      this.$store.dispatch('app/toggleDialog', false)
    },
    batchAddSku() {
      this.$emit('update:multipleSelectionSku', this.multipleSelection)
      this.$emit('update:showSkuListVisible', false)
    },
    operationList(data, operation, index) {
      if (operation.name === 'edit') {
        this.$nextTick(function() {
          this.form = clone(this.pickupInfo[index])
          this.dialogFormVisible = true
          // this.form = clone(data)
          this.editType = true
          if (!this.form.customsCodeList) {
            this.form.customsCodeList = [
              {
                customsCodeAreaManagementId: '',
                hscode: ''
              }
            ]
          }
          if (!this.form.customsDeclaredPriceList) {
            this.form.customsDeclaredPriceList = [
              {
                currency: '',
                price: ''
              }
            ]
          }
        })
      } else if (operation.name === 'delete') {
        this.$confirm('确认删除？')
          .then(_ => {
            this.onDel(index)
          })
          .catch(_ => {})
      }
    },
    async onSave() {
      this.$store.dispatch('app/toggleDialog', true)
      console.log('this.form :>> ', this.form)
      // return
      const data = await customerskuinfoSave(this.form)

      if (data.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.resetForm()
        this.init()
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    async onDel(index) {
      this.$store.dispatch('app/toggleDialog', true)
      console.log('index :>> ', index)
      console.log('this.pickupInfo[index].id :>> ', this.pickupInfo[index])
      const data = await customerskuinfoDelete(this.pickupInfo[index].id)
      if (data.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.init()
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    onSubmit() {
      this.init()
    },
    onReset() {
      this.searchCriteria = {
        declareNameCn: '',
        declareNameEn: '',
        sku: ''
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val

      this.init()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val

      this.init()
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this._validate()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    _validate() {
      for (const i of this.form.customsCodeList) {
        if (!i.customsCodeAreaManagementId || !i.hscode) {
          this.$message.error('请正确填写目的港清关编码')
          return
        }
      }
      for (const i of this.form.customsDeclaredPriceList) {
        if (!i.currency || !i.price) {
          this.$message.error('请正确填写申报价格')
          return
        }
      }

      this.onSave()
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.dialogImageUrl = ''
      this.dialogFormVisible = false
      this.form = {
        id: '',
        sku: '',
        declareNameCn: '',
        declareNameEn: '',
        brand: '',
        material: '',
        purpose: '',
        customsCode: '',
        customsCodeList: [{ customsCodeAreaManagementId: '', hscode: '' }],
        customsDeclaredPriceList: [{ currency: '', price: '' }],
        salesConnection: '',
        isCharged: '',
        volt: '',
        milliampere: '',
        watt: '',
        salePrice: '',
        declareValue: '',
        purchasingPrice: '',
        model: '',
        measurementUnit: '',
        perSuitNum: '',
        imgUrl: '',
        asin: '',
        productLotCount: '',
        distributionMaterialCount: '',
        sellPriceScreenshot: '',
        incomeScreenshot: ''
      }
      // this.$refs[formName].resetFields()
    },
    //  导出sku
    async onBatchDownload() {
      this.$store.dispatch('app/toggleDialog', true)
      const res = await exportSKU()
      if (res.path) {
        window.open(this.fileUrl + res.path)
      } else {
        this.$message.error(res.errorMesage || '导出失败')
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    onBatchSubmit(file) {
      this.init()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      }
      const isLt50M = file.size / 1024 / 1024 < 50

      if (!isLt50M) {
        this.$message.error('上传文件大小不能超过 50MB!')
        return false
      }

      return true
    },
    async uploadFn(fn) {
      if (!this.beforeAvatarUpload(fn.file)) return
      const formData = new FormData()
      formData.append('file', fn.file)
      console.log('formData :>> ', formData)
      const res = await uploadSkuImage(formData)

      if (res && res.code === 200) {
        this.$set(this.form, 'imgUrl', res.fileUrl)
      } else {
        this.$message('图片上传失败')
        this.$set(this.form, 'imgUrl', '')
      }
    },
    async uploadFn2(fn) {
      if (!this.beforeAvatarUpload(fn.file)) return

      const formData = new FormData()
      formData.append('file', fn.file)
      console.log('formData :>> ', formData)
      const res = await uploadSkuImage(formData)

      if (res && res.code === 200) {
        this.$set(this.form, 'sellPriceScreenshot', res.fileUrl)
      } else {
        this.$message('图片上传失败')
        this.$set(this.form, 'sellPriceScreenshot', '')
      }
    },
    async uploadFn3(fn) {
      if (!this.beforeAvatarUpload(fn.file)) return

      const formData = new FormData()
      formData.append('file', fn.file)
      console.log('formData :>> ', formData)
      const res = await uploadSkuImage(formData)
      if (res && res.code === 200) {
        this.$set(this.form, 'incomeScreenshot', res.fileUrl)
      } else {
        this.$message('图片上传失败')
        this.$set(this.form, 'incomeScreenshot', '')
      }
    },
    delImg() {
      this.$confirm('确认删除？')
        .then(_ => {
          this.imageUrl = ''
        })
        .catch(_ => {})
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      console.log('this.dialogImageUrl :>> ', this.dialogImageUrl)
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.resetForm('ruleForm')
        })
        .catch(_ => {})
    },
    selectCustomsCode() {
      const arr = []
      for (const i of this.form.customsCodeList) {
        arr.push(i.customsCodeAreaManagementId)
      }
      this.selectedCustomsCode = arr
    },
    selectCurrency() {
      const arr = []
      for (const i of this.form.customsDeclaredPriceList) {
        arr.push(i.currency)
      }
      this.selectedCurrency = arr
    },
    removeCustomsCode(index) {
      if (this.form.customsCodeList.length === 1) return
      this.form.customsCodeList.splice(index, 1)
      this.selectCustomsCode()
    },
    addCustomsCode(index) {
      const length = Object.keys(this.publicData.customsCodeMap).length
      if (this.form.customsCodeList.length >= length) return
      this.form.customsCodeList.splice(index + 1, 0, {
        customsCodeAreaManagementId: '',
        hscode: ''
      })
    },
    removeCustomsDeclaredPrice(index) {
      if (this.form.customsDeclaredPriceList.length === 1) return
      this.form.customsDeclaredPriceList.splice(index, 1)
      this.selectCurrency()
    },
    addCustomsDeclaredPrice(index) {
      const length = Object.keys(this.publicData.currencyMap).length
      if (this.form.customsDeclaredPriceList.length >= length) return
      this.form.customsDeclaredPriceList.splice(index + 1, 0, {
        currency: '',
        price: ''
      })
    }
  }
}
</script>

<style scoped>
.EndWaybillList >>> .el-textarea__inner {
  min-height: 60px !important;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin: 0 auto;
}

.avatar-uploader-icon-del {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  padding: 5px;
  z-index: 55;
}
</style>

<style lang="scss" scoped>
.item {
  position: absolute;
  right: -25px;
  top: 3px;
  font-size: 20px;
}
</style>
